<script setup lang="ts">
import type { BannerItem } from '@/types/home';
import { toRefs } from 'vue';
import { ref } from 'vue';

const activeIndex = ref(0);

// 当 swiper 下标发生变化时触发
const onChange: UniHelper.SwiperOnChange = (event) => {
  //  ！非空断言，主观上排出空值情况
  activeIndex.value = event.detail!.current;
};
// 定义props接收数据
const props = defineProps<{
  list: BannerItem[];
}>();
const { list } = toRefs(props);
</script>

<template>
  <view class="carousel">
    <swiper
      :circular="true"
      :autoplay="true"
      :interval="3000"
      @change="onChange"
    >
      <swiper-item v-for="item in list" :key="item.id">
        <navigator
          url="/pages/index/index"
          hover-class="none"
          class="navigator"
        >
          <image mode="widthFix" class="image" :src="item.imgUrl"></image>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 指示点 -->
    <view class="indicator">
      <text
        v-for="(item, index) in list"
        :key="item.id"
        class="dot"
        :class="{ active: index === activeIndex }"
      ></text>
    </view>
  </view>
</template>

<style lang="scss">
@import './styles/online-swiper.scss';
</style>
